<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="hear-ss">
        <el-form-item label="月份：" prop="math">
          <el-date-picker
            v-model="queryParams.math"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" icon="el-icon-search" size="small">搜索</el-button>
          <el-button @click="reset" icon="el-icon-refresh" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <download-excel
            class="export-excel-wrapper"
            :data="excelList"
            :fields="json_fields"
            :header="excelTitle"
            name="违纪报表.xlsx"

          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button type="warning" icon="el-icon-download" size="mini" >违纪统计报表导出</el-button>
          </download-excel>
        </el-col>


      </el-row>
      <!-- 表单 -->
      <el-table v-loading="loading" :data="form" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="violativeClassName" label="班级" align="center"></el-table-column>
        <el-table-column prop="classTeacherId" label="班主任" align="center"></el-table-column>
        <el-table-column prop="report" label="通报" align="center"></el-table-column>
        <el-table-column prop="warn" label="警告" align="center"></el-table-column>
        <el-table-column prop="record" label="记过" align="center"></el-table-column>
        <el-table-column prop="bigRecord" label="记大过" align="center"></el-table-column>
        <el-table-column prop="quit" label="劝退" align="center"></el-table-column>
        <el-table-column prop="dismiss" label="开除" align="center"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div>
        <el-pagination
          class="page"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 40, 60]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
</template>

<script>
  import { reportList } from "@/api/workflow/violationReport";
  import { getToken } from "@/utils/auth";
  export default {
    name: 'index',
    data() {
      return {
        // 分页总页数
        total: 0,
        //查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        form: [],
        // 遮罩层
        loading: false,
        excelList: [],
        excelTitle:'违纪统计报表',
        exportDataList:[],
        json_fields:{
          "班级":"violativeClassName",
          "班主任":"classTeacherId",
          "通报人数":"report",
          "警告人数":"warn",
          "记过人数":"record",
          "记大过人数":"bigRecord",
          "劝退人数":"quit",
          "开除人数":"dismiss",
        }
      }
    },
    // 监听属性 类似于data概念
    computed: {
      headers() {
        return {
          Authorization: getToken()
        };
      }
    },
    // 方法集合
    methods: {
      //违纪查询
      getList() {
        this.loading = true;
        reportList(this.queryParams).then(res => {
          this.form = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        });
      },
      //搜索按钮操作
      search() {
        this.getList();
      },
      //重置按钮操作
      reset() {
        this.fileList = undefined;
        this.resetForm("queryForm");
        this.search();
      },
      handleSelectionChange(selection) {
        console.log(selection);
        this.rowList = selection;
        this.multiple = !selection.length;
      },
    //分页
    handleSizeChange(num) {
      this.queryParams.pageSize = num;
      this.getList();
    },
    handleCurrentChange(num) {
      this.queryParams.pageNum = num;
      this.getList();
    },
      getExportData() {
        reportList({pageNum:1,pageSize:10000}).then(response => {
            this.excelList = [],
              this.exportDataList =  JSON.parse(JSON.stringify(response.data.list));
            for(let i=0;i<this.exportDataList.length;i++){
              this.excelList[i]=this.exportDataList[i]

              this.excelList[i].createTime = this.parseTime(this.exportDataList[i].createTime)
            }
          }
        );
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList();
      this.getExportData();
    }
  }
</script>

<style lang='scss' scoped>
  .page {
    float: right;
    margin: 10px 0px 0px 150px;
    padding-right: 80px;
  }
</style>
